<template>
    <div class="goods-hot" ref='target'>
        <h3 v-if="type === 1">24小时热销榜</h3>
        <h3 v-else-if="type === 2">周热销榜</h3>
        <h3 v-else-if="type === 3">总热销榜</h3>
        <GoodsItem v-for="item in list" :key="item.id" :good="item"></GoodsItem>
    </div>
</template>

<script>
export default {
    name: 'GoodsHot'
}
</script>

<script setup>
import { findHotGoods } from '@/apis/goods';
import GoodsItem from '@/views/category/components/GoodsItem.vue'
import { lazyLoadData } from '@/hooks'

const porps = defineProps({
    type: {
        type: Number,
        default: 1
    },
    goodsId: {
        type: String,
        default: ''
    }
})

const { target, list } = lazyLoadData(() => findHotGoods({ id: porps.goodsId, type: porps.porps }))
</script>

<style scoped lang="less">
.goods-hot {
    h3 {
        height: 70px;
        background: @helpColor;
        color: #fff;
        font-size: 18px;
        line-height: 70px;
        padding-left: 25px;
        margin-bottom: 10px;
        font-weight: normal;
    }

    :deep(.goods-item) {
        background: #fff;
        width: 100%;
        margin-bottom: 10px;

        img {
            width: 200px;
            height: 200px;
        }

        p {
            margin: 0 10px;
        }

        &:hover {
            transform: none;
            box-shadow: none;
        }
    }
}
</style>